<template>
    <div class="curd-component-wrap">
        <div class="curd-component-wrap-left">
            <a-button type="primary">新建</a-button>
            <a-button>导入</a-button>
            <a-dropdown>
                <template #overlay>
                    <a-menu @click="handleMenuClick">
                        <a-menu-item key="1">
                            <UserOutlined />
                            1st menu item
                        </a-menu-item>
                        <a-menu-item key="2">
                            <UserOutlined />
                            2nd menu item
                        </a-menu-item>
                        <a-menu-item key="3">
                            <UserOutlined />
                            3rd item
                        </a-menu-item>
                    </a-menu>
                </template>
                <a-button>
                    批量操作
                    <DownOutlined />
                </a-button>
            </a-dropdown>
            <a-dropdown>
                <template #overlay>
                    <a-menu @click="handleMenuClick">
                        <a-menu-item key="1">
                            <UserOutlined />
                            1st menu item
                        </a-menu-item>
                        <a-menu-item key="2">
                            <UserOutlined />
                            2nd menu item
                        </a-menu-item>
                        <a-menu-item key="3">
                            <UserOutlined />
                            3rd item
                        </a-menu-item>
                    </a-menu>
                </template>
                <a-button>
                    更多
                    <DownOutlined />
                </a-button>
            </a-dropdown>
            <a-button type="text" disabled>已选X条</a-button>
        </div>

        <div class="curd-component-wrap-right">
            <a-button>操作日志</a-button>
            <a-tooltip title="刷新">
                <a-button :icon="h(SyncOutlined)" />
            </a-tooltip>
            <a-button :icon="h(DownloadOutlined)"></a-button>
            <a-button :icon="h(SettingOutlined)"></a-button>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { h } from 'vue';

import { SearchOutlined, DownloadOutlined, SettingOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
const handleButtonClick = (e: Event) => {
    console.log('click left button', e);
};
const handleMenuClick: MenuProps['onClick'] = e => {
    console.log('click', e);
};
</script>

<style lang="less" scoped>
.curd-component-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
}

.curd-component-wrap-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.curd-component-wrap-right {
    display: flex;
    gap: 8px;
    align-items: center;
}



.demo-dropdown-wrap :deep(.ant-dropdown-button) {
    margin-right: 8px;
    margin-bottom: 8px;
}
</style>
